<template>
  <div>
    <button @click="reverse">Reverse</button>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  // 自定义属性
  // props: ['value'],
  // 自定义属性 完整写法
  props: {
    value: {
      type: String, // Number Boolean String Object Array
      require: false,
      default: ''
    }
  },
  data: () => ({
    msg: ''
  }),
  methods: {
    reverse() {
      this.msg = this.msg.split('').reverse().join('')
      // 自定义事件
      this.$emit('change', this.msg)
    }
  },
  created() {
    this.msg = this.value
  }
}
</script>
